<template>
    <div class="app-container-result">
        <!-- 内容展示区 -->
        <div class="progress-container">
            <!-- left -->
            <div class="leftContainer" @contextmenu="showMenu()">
                <iframe
                    id="myIframe"
                    class="myIframe"
                    :src="
                        '/static/pdf/web/viewer.html?file='+sourceFileMountPath
                      "
                    width="100%"
                    height="100%"
                    style="background: #fff"
                    frameborder="0"
                >
                </iframe>
            </div>
            <!-- middle -->
            <div class="midRule">
                <div class="langHeight">
                    <el-row style="height: 100%">
                        <el-col :span="24" class="remarkBox">
                            <el-timeline>
                                <el-timeline-item
                                    :hide-timestamp="false"
                                    v-for="(item,index) in review"
                                    :key="index"
                                    class="customer-time-line"
                                >
                                    <el-card>
                                        <el-tooltip class="item" effect="dark" :content="item.chooseContent" placement="top-start">
                                            <p class="tooltipStyle">{{'第' + item.pageNum + '页:' + item.chooseContent}}</p>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="定位" placement="bottom">
                                            <el-button
                                                size="mini"
                                                icon="el-icon-aim"
                                                type="text"
                                                @click="
                                                setPosition(
                                                    'myIframe',
                                                    item.cachePdf,
                                                    item.topPdf,
                                                    item.chooseContent,
                                                    item.pageNum
                                                )"
                                            ></el-button>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="查看详情" placement="bottom">
                                            <el-button
                                                size="mini"
                                                icon="el-icon-notebook-2"
                                                @click="editEndorse(1,item)"
                                                type="text"></el-button>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="修改" placement="bottom">
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-edit-outline"
                                                @click="editEndorse(2,item)"
                                            ></el-button>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                                            <el-button
                                                size="mini"
                                                icon="el-icon-delete"
                                                @click="handleDeleteRemark(item)"
                                                type="text"></el-button>
                                        </el-tooltip>
                                    </el-card>
                                </el-timeline-item>
                            </el-timeline>
                        </el-col>

                    </el-row>

                </div>
            </div>
        </div>
        <!-- 新增批注模态框 -->
        <el-dialog
            :title="remarkTitle"
            :visible.sync="remarkOpen"
            width="780px"
            append-to-body
            @close="dialogClose"
        >
            <el-form ref="remarkFormRef" :model="remarkForm" :disabled="formType === 1" label-width="80px">
                <el-form-item label="批注段落" prop="">
                    <span>{{ remarkForm.chooseContent }}</span>
                </el-form-item>
                <el-form-item label="批注内容">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkContent"
                        placeholder="请输入批注内容"
                    />
                </el-form-item>
                <el-form-item label="意见建议">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkAdvice"
                        placeholder="请输入意见建议"
                    />
                </el-form-item>
                <el-form-item label="提出理由">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkReason"
                        placeholder="请输入提出理由"
                    />
                </el-form-item>
                <el-form-item label="处理意见">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkResolution"
                        placeholder="请输入处理意见"
                    />
                </el-form-item>
                <el-form-item label="对接状态">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkDockingStatus"
                        placeholder="请输入对接状态"
                    />
                </el-form-item>
                <el-form-item label="所内意见">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkStationAdvice"
                        placeholder="请输入所内意见"
                    />
                </el-form-item>
                <el-form-item label="重要程度">
                    <el-radio-group v-model="remarkForm.remarkIsNeed">
                        <el-radio :label="1">紧急</el-radio>
                        <el-radio :label="2">重要</el-radio>
                        <el-radio :label="3">一般</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="研总要求">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="remarkForm.remarkDocRequire"
                        placeholder="请输入研总要求"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" v-show="formType!==1" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="dialogClose">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {uuid} from "vue-contextmenujs/src/util";
import {
    addRemark,
    getRemarkList,
    checkArea,
    delRemark,
} from "@/api/compare/index"
export default {
    data() {
        return {
            // 新增批注是否显示弹出层
            remarkOpen: false,
            // contextmenu data (菜单数据)
            contextMenuData: {
                // the contextmenu name(@1.4.1 updated)
                menuName: "demo",
                // The coordinates of the display(菜单显示的位置)
                axis: {
                    x: null,
                    y: null,
                },
                // Menu options (菜单选项)
                menulists: [
                    {
                        fnHandler: "savedata", // Binding events(绑定事件)
                        icoName: "fa fa-home fa-fw", // icon (icon图标 )
                        btnName: "Save", // The name of the menu option (菜单名称)
                    },
                ],
            },
            //新增批注数据
            remarkForm: {
                domId:'',   //前端需要 区分左右两侧文档
                id: null, // 批注文档id---主键唯一
                remarkContent: "", // 批注内容
                pageNum: "", // 当前标注所在的PDF页码
                remarkAdvice:'',  //意见建议
                remarkReason:'',   //提出理由
                remarkResolution:'',   //处理意见
                remarkDockingStatus:'',  //对接状态
                remarkStationAdvice:'',//所内意见
                remarkIsNeed:1,  //是否需要
                remarkDocRequire:'',  //研总要求
                chooseContent:"",  //选中要标注的文内容
                topPdf:'',    //  选中的内容的top
                cachePdf:"",   //pdf缓存
                docId:'',   //当前添加标注的文档id
                top:'',  //
            },
            diffBtnList: [],
            diffLineData: {
                l_x1: 0,
                l_y1: 0,
                l_x2: 0,
                l_y2: 0,
                l_x3: 0,
                l_y3: 0,

                r_x1: 0,
                r_y1: 0,
                r_x2: 0,
                r_y2: 0,
                r_x3: 0,
                r_y3: 0
            },
            l_y1: 0,  //暂存左侧y1坐标点
            r_y3: 0,  //暂存右侧y3坐标点
            lastClickPonitTop: null,  //暂存中间差异点上一次点击的点
            pdfStyle:{
                offsetWidth:null,  //  含margin border
                offsetHeight:null,
                clientWidth:null,   //纯内容宽
                clientHeight:null,
            },
            leftPageDoms:[],
            rightPageDoms:[],
            iframeLeft: '',
            review:[],  //批注
            formType:null,   //标识当前标注操作是什么 1---查看 2--修改 3---新增
            remarkTitle:'',  //标注弹框标题
            docId:'',  //当前对比文档记录的id
            chooseTxt:{  //滑选区域
                leftFile:'',
                rightFile:'',
            },
            sourceFileMountPath:'',  //左侧pdf绝对路径
            targetFileMountPath:'',  //右侧pdf绝对路径
            leftEnd:false,
            rightEnd:false,
            pdfPageScale:1,  //当前pdf的缩放比例，在差异点中间icon定位的时候用
        }
    },
    watch:{
        $route: {
            handler: function(route) {
                this.docId = this.$route.query.id;
                this.sourceFileMountPath = process.env.VUE_APP_BASE_API+'/pdf_files/upload'+this.$route.query.sourceFileMountPath;

            }
        },
        leftEnd(val){
            if(this.leftEnd){
                this.resetHeight();
                //加载完调用批注
                this.getRemarkList();
            }
        },
    },
    mounted() {
        this.docId = this.$route.query.id;
        this.sourceFileMountPath = process.env.VUE_APP_BASE_API+'/pdf_files/upload'+this.$route.query.sourceFileMountPath;
       // //这是滑选事件
        this.getSelectText("myIframe");
        // 搜索时 接收数据
        this.getMessage('myIframe');
        this.iframeLeft = document.getElementById("myIframe");   //固定获取左侧的iframe

    },
    methods: {
        //需求分歧表定位过来
        needDiffTablePosition(){
            if(this.$route.query.type === 'remarkPosition') {   //需求分歧表定位
                let item = JSON.parse(this.$route.query.infoStr);
                this.setPosition(
                    "myIframe",
                    item.cachePdf,
                    item.topPdf,
                    item.chooseContent,
                    item.pageNum)
            }
        },
        //修改批注
        editEndorse(type,val) {
            this.formType = type;
            if(this.formType === 1){
                this.remarkTitle = "查看批注信息";
            }else{
                this.remarkTitle = "修改批注信息";
            }
            this.remarkOpen = true;
            this.remarkForm = JSON.parse(JSON.stringify(val));
        },
        //删除批注
        handleDeleteRemark(item){
            this.$confirm('是否删除该批注?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delRemark(item.id)
            }).then(() => {
                this.getRemarkList();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //修改模态框提交按钮
        modifySubmitForm() {
            // addEndorse({...this.form2, remarkContent: this.modifyAnnotations}).then(
            //     (res) => {
            //         if (res.code == 200) {
            //             debugger;
            //             this.getRemarkList();
            //             this.$message({
            //                 message: "修改批注成功",
            //                 type: "success",
            //             });
            //             this.open2 = false;
            //         }
            //     }
            // );
        },
        //修改模态框取消按钮
        modifyCancel() {
            this.open2 = false;
        },

        //新增模态框>提交按钮
        submitForm() {
            this.getPosition();
            this.remarkOpen = false;
            console.log(this.remarkForm);
            console.log(JSON.stringify(this.remarkForm));

            // console.log(this.review)
            // console.log(JSON.stringify(this.review))

            if (this.formType === 2){   //修改

            }else if(this.formType === 3){   //新增
                // this.review.push(JSON.parse(JSON.stringify(this.remarkForm)));
                addRemark(this.remarkForm).then((res) => {
                    if (res.code === 200) {
                        this.remarkOpen = false;
                        this.getRemarkList();
                        this.$message({
                            message: "新增批注成功",
                            type: "success",
                        });
                    }
                });
            }

        },
        getPosition() {
            //获取子页面对应的页面编码和top
            this.remarkForm.topPdf = document
                .getElementById("myIframe")
                .contentWindow.document.getElementById("page_top").value;
            this.remarkForm.cachePdf = document
                .getElementById("myIframe")
                .contentWindow.document.getElementById("page_cache")
                .value.split(" ")[0];

            this.tips = "获取的定位信息：top=" + this.top + "::: cache=" + this.cache;
        },
        showMenu() {
            event.preventDefault();
            var x = event.clientX;
            var y = event.clientY;
            // Get the current location
            this.contextMenuData.axis = {
                x,
                y,
            };
        },
        savedata() {
            alert(1);
        },
        //获取需求分歧list（标注）
        getRemarkList() {
            //分别获取左右两侧的备注
            getRemarkList({docId:this.$route.query.sourceFileId}).then(res=>{
                this.review = res.rows || [];
                this.needDiffTablePosition()
            });
        },

        // 滑选事件注册： 获取鼠标选中的文本
        getSelectText(domId) {
            let _this = this;
            let iframe = document.getElementById(domId);
            // console.log(ifra me)

            let x = "";
            let y = "";
            let _x = "";
            let _y = "";
            // iframe 加载完成后执行并将双击事件过滤掉，因为双击事件可能也触发滑选，所以为了不误操作，将其剔除
            iframe.onload = function () {
                //添加左侧svg标注块

                let pages = iframe.contentWindow.PDFViewerApplication;

                pages.eventBus.on('documentload', function () {   //判断pdf加载完成

                    // pages.pdfViewer.container.addEventListener('scroll', function () {
                    //     // console.log(1111)
                    //     // const top = pages.pdfViewer.container.scrollTop;  //获取左边的滚动
                    //     // document.getElementsByClassName("midRule")[0].scrollTop = top;
                    //     // console.log(top);
                    //     _this.resetLeftRectLine(top);
                    // })
                    console.log('documentload', pages)
                    // console.log(arguments);
                    let pageDom = pages.pdfViewer.viewer.children;   //获取当前的每页
                    if(domId==='myIframe'){
                        _this.leftPageDoms = pageDom;
                        _this.leftEnd = true;
                        _this.pdfPageScale = pages.toolbar.pageScale;
                    }else {
                        _this.rightPageDoms = pageDom;
                        _this.rightEnd = true;
                    }
                    // console.log(pageDom);
                    _this.pdfStyle = {
                        clientWidth: pageDom[0].clientWidth,
                        clientHeight: pageDom[0].clientHeight,
                        offsetWidth:pageDom[0].offsetWidth,  //  含margin border
                        offsetHeight:pageDom[0].offsetHeight,
                    }

                })
                // console.log(pages);
                pages.eventBus.on('resize', function (e) {   //判断pdf resize
                    console.log('resize',e);

                    let pageDom = pages.pdfViewer.viewer.children;   //获取当前的每页
                    _this.pdfStyle = {
                        clientWidth: pageDom[0].clientWidth,
                        clientHeight: pageDom[0].clientHeight,
                        offsetWidth:pageDom[0].offsetWidth,  //  含margin border
                        offsetHeight:pageDom[0].offsetHeight,
                    }
                    _this.resetHeight();
                    console.log(_this.pdfStyle);
                    _this.appendSvg(domId,pageDom,_this.diffBtnList[0],0);   //此处应记录当前的页数
                })


                // 鼠标点击监听
                iframe.contentDocument.addEventListener(
                    "mousedown",
                    function (e) {
                        x = e.pageX;
                        y = e.pageY;
                    },
                    true
                );
                // 鼠标抬起监听
                iframe.contentDocument.addEventListener(
                    "mouseup",
                    function (e) {
                        _x = e.pageX;
                        _y = e.pageY;
                        console.log(e);
                        console.log(iframe.contentWindow.getSelection())
                        if (x == _x && y == _y) return; //判断点击和抬起的位置，如果相同，则视为没有滑选，不支持双击选中
                        var choose = iframe.contentWindow.getSelection().toString();
                        if(domId === 'myIframe'){
                            _this.chooseTxt.leftFile = choose;
                            _this.remarkForm.docId = _this.$route.query.sourceFileId
                        }else if(domId === 'myIframe2'){
                            _this.chooseTxt.rightFile = choose;
                            _this.remarkForm.docId = _this.$route.query.targetFileId
                        }

                        console.log(choose)
                        _this.remarkForm.chooseContent = choose;
                        _this.remarkForm.domId = domId;

                        _this.remarkForm.pageNum =
                            iframe.contentWindow.window.PDFViewerApplication.page;
                        _this.selectText =
                            "第" +
                            iframe.contentWindow.window.PDFViewerApplication.page +
                            "页中：" +
                            choose;
                        _this.remarkForm.top = e.srcElement.offsetTop + _this.remarkForm.pageNum *_this.pdfStyle.clientHeight;   //中间标注icon用
                    },
                    true
                );

                // 鼠标右键监听
                iframe.contentDocument.addEventListener(
                    "contextmenu",
                    function (e) {
                        const content = iframe.contentWindow.getSelection();
                        if(domId === 'myIframe'){
                            _x = e.pageX;
                            _y = e.pageY;
                        }else if(domId === 'myIframe2'){
                            _x = e.pageX + _this.pdfStyle.offsetWidth + 280;
                            _y = e.pageY;
                        }
                        console.log(_this.chooseTxt)
                        _this.$contextmenu({
                            items: [
                                {
                                    icon: "el-icon-circle-plus-outline",
                                    label: "添加批注",
                                    disabled: !content,
                                    onClick: () => {
                                        console.log(">>", content);
                                        _this.clipboardContent = content;
                                        _this.formType = 3;  //add
                                        _this.remarkOpen = true;
                                        _this.remarkTitle = "添加批注";
                                    },
                                },

                            ],
                            // e,
                            x: _x, //x轴坐标
                            y: _y, //y轴坐标
                            zIndex: 3,
                            minWidth: 140,
                        });
                        e.preventDefault();
                    },
                    true
                );

                // 取消鼠标右键监听
                iframe.contentDocument.addEventListener(
                    "click",
                    function (e) {
                        _this.$contextmenu.destroy();
                    },
                    true
                );

                //取消部分按钮
                //取消下载按钮
                iframe.contentWindow.window.PDFViewerApplication.appConfig.toolbar.download.setAttribute(
                    "hidden",
                    true
                );
                //取消当前在看按钮
                iframe.contentWindow.window.PDFViewerApplication.appConfig.toolbar.viewBookmark.setAttribute(
                    "hidden",
                    true
                );
                //取消打开按钮
                iframe.contentWindow.window.PDFViewerApplication.appConfig.toolbar.openFile.setAttribute(
                    "hidden",
                    true
                );
            };
        },
        resetHeight(){
            let _this = this;
            let iframe = document.getElementById("myIframe");  //默认赋值左侧高度给中间
            let viewer = iframe.contentWindow.PDFViewerApplication.pdfViewer.viewer;
            // console.log(1111)
            // console.log(viewer);
            let langHeightDom = document.getElementsByClassName("langHeight")[0];   //获取到整个pdf高度
            langHeightDom.style.height = viewer.clientHeight + "px";  //将pdf高度赋值给中间icon

            for(let i = 0;i<_this.diffBtnList.length;i++){
                if(_this.diffBtnList[i].type!=='remark-i'){
                    let heightNum = Number(_this.pdfStyle.clientHeight);
                    let pagePDFNum = Number(_this.diffBtnList[i].leftObj.pagePDF);
                    //let topNum = parseInt(_this.diffBtnList[i].leftObj.top, 10) / 100;  //将字符类型的百分比转换成数字类型
                    let topNum = Number(_this.diffBtnList[i].leftObj.top);
                    //icon的top = pdf单页面的高度 * 当前页数（1开始）+  pdf单页面的高度 * 左边距离当前页面的top
                    _this.diffBtnList[i].top = heightNum * (pagePDFNum - 1) + heightNum * topNum + 9 + 9 * pagePDFNum;
                    console.log(_this.diffBtnList[i])
                }
            }
        },
        appendSvg(domId,pageDom,diffList,index){
            let _this = this;
            let str = ''; //
            // console.log(pageDom)
            // console.log(diffList)
            let singlePageDom = null;
            if(domId === 'myIframe'){
                singlePageDom = pageDom[diffList.leftObj.pagePDF - 1];  //获取到有标记的页面
            }else {
                singlePageDom = pageDom[diffList.rightObj.pagePDF - 1]
            }
            let className = '.widget'+index;
            let widgetDom = singlePageDom.querySelectorAll(className);
            if(widgetDom.length===0){   //避免重复添加
                let divDom = document.createElement("div");
                divDom.className = "widget"+index;
                divDom.style.position = "absolute";
                divDom.style.zIndex = 999;
                if(domId === 'myIframe'){
                    divDom.style.left = diffList.leftObj.left * 100 +'%';
                    divDom.style.top = diffList.leftObj.top * 100 +'%';
                    divDom.style.width = diffList.leftObj.width * 100 +'%';
                    divDom.style.height = diffList.leftObj.height * 100 +'%';
                }else{
                    divDom.style.left = diffList.rightObj.left * 100 +'%';
                    divDom.style.top = diffList.rightObj.top * 100 +'%';
                    divDom.style.width = diffList.rightObj.width * 100 +'%';
                    divDom.style.height = diffList.rightObj.height * 100 +'%';
                }
                var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttribute("width", '100%');
                svg.setAttribute("height", '100%');
                svg.style.position = "absolute";
                svg.style.left = 0+'px';
                svg.style.top = 0+'px';
                var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                // 设置矩形的属性
                rect.setAttribute('width', '100%'); // 矩形的宽度
                rect.setAttribute('height', '100%');// 矩形的高度
                rect.setAttribute('fill', 'rgba(144,144,227,0.2)'); // 矩形的填充颜色
                rect.setAttribute('stroke-width', 1); // 矩形的线宽
                rect.setAttribute('stroke', 'rgba(144,144,227,0.3)'); // 矩形描线
                svg.appendChild(rect);
                divDom.appendChild(svg);
                singlePageDom.appendChild(divDom);
            }
            // console.log(singlePageDom.innerHTML)
        },
        setPosition(domId,cachePdf, topPdf, chooseContent, pageIndex) {
            console.log(domId)
            this.set2(domId);
            var iframeDocument = document.getElementById(domId);
            var removeLink =
                iframeDocument.contentDocument.getElementsByClassName("addLink");
            if (removeLink.length > 0) {
                removeLink[0].parentNode.removeChild(removeLink[0]);
            }
            //添加到子页面中
            //先判断是否有   没有再添加   有就不添加
            var aEle = document.createElement("a");
            let idStr = "p37318"+domId;
            aEle.setAttribute(
                "href",
                '#[{"num":' + cachePdf + ',"gen":0},{"name":"XYZ"},74,' + topPdf + ",0]"
            );
            aEle.setAttribute("class", "internalLink addLink");
            aEle.setAttribute("id", idStr);
            var pEle = document.createElement("p");
            aEle.appendChild(pEle);
            if (!iframeDocument.contentWindow.document.getElementById("#"+idStr)) {
                iframeDocument.contentWindow.document.body.appendChild(aEle);
            }
            console.log(iframeDocument.contentWindow.document
                .getElementById(idStr)
                .getElementsByTagName("p")[0])
            iframeDocument.contentWindow.document
                .getElementById(idStr)
                .getElementsByTagName("p")[0]
                .click();
            this.sendMessage(domId,chooseContent, pageIndex);
        },
        set2(domId) {
            var iframeDocument = document.getElementById(domId);
            var removeLink =
                iframeDocument.contentDocument.getElementsByClassName("addLink");
            if (removeLink.length > 0) {
                removeLink[0].parentNode.removeChild(removeLink[0]);
            }
            //添加到子页面中
            //先判断是否有   没有再添加   有就不添加
            let idStr = "p17192"+domId;
            var aEle = document.createElement("a");
            aEle.setAttribute(
                "href",
                '#[{"num":17,"gen":0},{"name":"XYZ"},74,192,0]'
            );
            aEle.setAttribute("class", "internalLink addLink");
            aEle.setAttribute("id", idStr);

            var pEle = document.createElement("p");
            var pContentEle = document.createTextNode("GG");
            pEle.appendChild(pContentEle);

            aEle.appendChild(pEle);
            if (!iframeDocument.contentWindow.document.getElementById("#"+idStr)) {
                iframeDocument.contentWindow.document.body.appendChild(aEle);
            }
            iframeDocument.contentWindow.document
                .getElementById(idStr)
                .getElementsByTagName("p")[0]
                .click();
        },

        // 发送数据(搜索文字)
        sendMessage(domId,selectText, pageIndex) {
            console.log("搜索内容：" + selectText);
            //获取iframe
            let iframe = document.getElementById(domId);
            //将滑选数据传入到iframe中
            iframe.contentWindow.postMessage(
                {selectText: selectText, pageIndex: pageIndex},
                "*"
            );
        },

        // 接受数据
        getMessage(domId) {
            //获取iframe
            let iframe = document.getElementById(domId);
            // iframe监听是否有数据传入，将传入的数据作为参数传递给pdf.js的find接口
            iframe.contentWindow.addEventListener(
                "message",
                function (e) {
                    //这里打印一下，看是否拿到了传入的数据
                    console.log(
                        "这里打印一下，看是否拿到了传入的数据" + JSON.stringify(e.data)
                    );
                    // 这里打印的是pdf.js暴露出来的find接口
                    console.log(iframe.contentWindow.PDFViewerApplication)
                    console.log(iframe.contentWindow.PDFViewerApplication.findBar);
                    // 输入查询数据
                    iframe.contentWindow.PDFViewerApplication.findBar.findField.value =
                        e.data.selectText;
                    // 要求查询结果全体高亮
                    iframe.contentWindow.PDFViewerApplication.findBar.highlightAll.checked = true;
                    // 上面两部已经OK，触发highlightallchange方法。OK。全部完成，效果
                    iframe.contentWindow.PDFViewerApplication.findBar.dispatchEvent(
                        "highlightallchange"
                    );
                    iframe.contentWindow.PDFViewerApplication.pdfViewer.currentPageNumber =
                        parseInt(e.data.pageIndex);
                },
                false
            );
        },
        //添加批注模态框>取消按钮
        dialogClose() {
            this.remarkOpen = false;
            this.$refs.remarkFormRef.resetFields();
        },
    }

}
</script>

<style lang="scss" scoped>
.app-container-result {
    width: 100%;
    height: calc(100vh - 84px)
}

.progress-container {
    width: 100%;
    display: flex;
    height: 100%;
    background: #d9d9d9;
    .widget {
        position: absolute;
        z-index: 9999;
    }

    .widget > svg {
        overflow: visible;
        position: absolute;
        left: 0;
        top: 0;
    }

    .leftContainer {
        width: calc(100% - 200px);
        height: 100%;
        overflow: auto;
    }

    .midRule {
        width: 200px;
        height: calc(100% - 32px);
        background: #d9d9d9;
        position: relative;
        overflow: auto;
        margin: 32px 0 0 0;

        .diff-control-item {
            position: absolute;
            left: 5px;
            padding: 0 4px;
            width: auto;
            height: 18px;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            .icon-diff {
                display: inline-block;
                width: 18px;
                height: 18px;
                background-size: contain;
                background-repeat: no-repeat;
            }

            .change-i {
                background-image: url("../../assets/images/icon-change.svg");
            }

            .add-i {
                background-image: url("../../assets/images/icon-insert-red.svg");
            }

            .delete-i {
                background-image: url("../../assets/images/icon-delete-red.svg");
            }

            .remark-i {
                background-image: url("../../assets/images/icon-remark-red.svg");
            }
        }
        .remarkBox{
            .el-timeline{
                padding: 0;
                ::v-deep .el-card__body{
                    padding: 5px !important;
                    .tooltipStyle{
                        width: 100%;
                        height: 40px;
                        word-break: keep-all;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-bottom: 3px;
                    }
                }
            }
        }
    }
}

.diff-line-container {
    position: absolute;
    z-index: 10;
    top: 32px;
    left: 0;
    width: 100%;
    height: calc(100% - 32px);
    pointer-events: none;
}

</style>
